<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2019/4/17
  Time: 23:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="java.util.Map" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/userInfo.css">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<div class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="main.php" class="navbar-brand"></a>
        </div>
        <div class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li><a href="index.jsp">首页</a></li>
                <li class="active"><a href="info.jsp">个人信息</a></li>
                <li><a href="error.jsp">错误页面</a></li>
                <li><a href="##">标题3</a></li>
                <li><a href="##">标题4</a></li>
            </ul>
            <%
                Map<String,String> isLogin = (Map<String, String>) request.getSession().getAttribute("isLogin");
            %>

            <div class="nav navbar-nav navbar-right">
                <li><a href="index.jsp">欢迎您，<%=isLogin.get("name")%></a></li>
                <li><a href="/logoutServlet">退出</a></li>
            </div>
        </div>
    </div>
</div>
<!--上传图片box-->
<div class="uploadImg-box">
    <img src="img/x.png">
    <h3>修改头像</h3>
    <div class="box-min">
        <form action="uploadImage" enctype="multipart/form-data" method="post">
            <div class="form-group">
                <input id="lefile" type="file" style="display:none" name="headfile" >
                <div class="input-append">
                    <input id="photoCover" class="form-control" type="text"  name="headfileTemp">
                    <a class="btn btn-info btn-sm showbtn" onclick="$('input[id=lefile]').click();">Browse</a>
                </div>
            </div>
            <div class="form-group" style="margin-top: 40px;">
                <button type="submit" class="btn btn-primary btn-block">上    传</button>
            </div>
        </form>
    </div>
</div>
<div class="container">
    <div class="row" style="margin-top: 10px;">
        <div class="col-md-3">
            <div class="info-title">
                <img src="img/infoUser.png" alt="infoUser">
                <span>个人信息</span>setting
            </div>
            <div class="show-headimg">
                <div id="headImg">
                    <img src="img/boy.png">
                    <span class="changeImg">修改头像</span>
                </div>
                <p>Admin</p>
            </div>
        </div>
        <div class="col-md-9">
            <div class="info-box">
                <div class="box-title">
                    <img src="img/setting.png" alt="setting">
                    <span>账户设置</span>
                </div>
                <div class="box-info">
                    <h3>* 个人信息 <a href="#" class="btn btn-danger btn-min" id="changeInfo">修改</a></h3>
                    <div class="box-userinfo">
                        <form id="info-form" method="post">
                            <table id="info-table">
                                <tr>
                                    <td align="right">用户名：</td>
                                    <td class="noshowKey">name</td>
                                    <td class="input">Admin</td>
                                </tr>
                                <tr>
                                    <td align="right">邮 箱：</td>
                                    <td class="noshowKey">email</td>
                                    <td class="input">1824751554@qq.com</td>
                                </tr>
                                <tr>
                                    <td align="right">手机号：</td>
                                    <td class="noshowKey">phone_number</td>
                                    <td class="input">15999756885</td>
                                </tr>
                                <tr>
                                    <td align="right">学 院：</td>
                                    <td class="noshowKey"></td>
                                    <td class="input">网络空间安全学院</td>
                                </tr>
                                <tr>
                                    <td align="right">类 型：</td>
                                    <td class="noshowKey">group</td>
                                    <td class="input">student</td>
                                </tr>
                                <tr id="form-button" style="display: none;margin-top: 10px;">
                                    <td align="center"><input type="submit" class="btn-min btn btn-info" value="保存"/></td>
                                    <td align="center"><input type="reset" class="btn-min btn btn-danger cancel" value="取消"/></td>
                                </tr>
                            </table>
                        </form>
                    </div>
                </div>
                <div class="box-info" style="margin-top: 40px;">
                    <h3>* 绑定信息 <a href="#" class="btn btn-info btn-min" id="bindInfo">绑定</a></h3>
                    <form method="post" id="bind-form">
                        <div class="row">
                            <div class="col-md-6">
                                <p style="font-weight: bold">手机号:</p>
                                <p class="noshowKey">phone_number</p>
                                <p style="margin-left: 30px;" class="bind">尚未绑定</p>
                            </div>
                            <div class="col-md-6">
                                <p style="font-weight: bold">QQ号:</p>
                                <p class="noshowKey">qq</p>
                                <p style="margin-left: 30px;" class="bind">尚未绑定</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <p style="font-weight: bold">微信号:</p>
                                <p class="noshowKey">weixin</p>
                                <p style="margin-left: 30px;" class="bind">尚未绑定</p>
                            </div>
                            <div class="col-md-6">
                                <p style="font-weight: bold">Github:</p>
                                <p class="noshowKey">Github</p>
                                <p style="margin-left: 30px;" class="bind">尚未绑定</p>
                            </div>
                        </div>
                        <div class="row" id="bind-button" style="display: none;margin-top: 20px;">
                            <input type="submit" class="btn-min btn btn-info" value="保存" style="margin-left: 300px;"/>
                            <input type="reset" class="btn-min btn btn-danger cancel" value="取消"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    $(document).ready(function(){

        //修改头像
        $("#headImg").hover(function () {
            $("#headImg").css("cursor","pointer");
            $("#headImg img").css("opacity","0.7");
            $("#headImg span").css("display","inline");
        },function () {
            $("#headImg img").css("opacity","1");
            $("#headImg span").css("display","none");
        });
        $("#headImg").click(function () {
            $(".uploadImg-box").show();
            $(".container").css("opacity","0.4");
            $(".uploadImg-box").css("opacity","1");
        });

        $(".uploadImg-box img").click(function () {
            $(".uploadImg-box").hide();
            $(".container").css("opacity","1");
        });

        //修改个人信息
        $("#changeInfo").click(function () {
            $("#info-form").attr("action","/changeInfo");
            //隐藏修改按钮
            $("#changeInfo").hide();
            //显示 保存、取消 按钮
            $("#form-button").show();
            var input = $(".input");
            var len = input.length;
            for(var i=0;i<len;i++){
                var text = input.eq(i).text();
                var name = $(".noshowKey").eq(i).text();
                var str = '<input type="text" name="'+name+'" value="'+text+'">';
                input.eq(i).html(str);
            }
        });

        //点击取消按钮
        $(".cancel").click(function () {
            window.location.reload();
        });

        //绑定个人信息
        $("#bindInfo").click(function () {
            $("#bind-form").attr("action","/bindInfo");
            //隐藏修改按钮
            $("#bindInfo").hide();
            //显示 保存、取消 按钮
            $("#bind-button").show();
            var input = $(".bind");
            var len = input.length;
            console.log(len);
            for(var i=0;i<len;i++){
                var text = input.eq(i).text();
                if(text=="尚未绑定"){
                    text = "";
                }
                var name = $("p.noshowKey").eq(i).text();
                var str = '<input type="text" name="'+name+'" value="'+text+'">';
                input.eq(i).html(str);
            }
        });

    });
</script>